window.onload = function () {
	let main1 = new Runn();
	main1.headScroll().inputHover().menu().running().scrolling1().scrolling2()
		.picRun().ajaxA().slideBtn()
}
class Runn {
	constructor() {
		this.$flag = 0;
		this.$timer = null;
		this.$index = 0;
		this.$imgs = $(".lunbo_nav img");
		this.$tab = $(".lunbo_tab li");
	}
	//头部滚动条
	headScroll() {
		let $moveul = $(".header-list");
		let $current = 0;
		setInterval(function () {
			$current++;
			tabLi();
		}, 2000)

		function tabLi() {
			if ($current == 3) {
				$moveul.css({
					top: 0
				})
				$current = 1;
				$moveul.animate({
					top: -30 * $current
				})
			} else {
				$moveul.animate({
					top: -30 * $current
				})
			}
		}
		return this;
	}
	//输入框划入划出效果
	inputHover() {
		$("#headersearch").hover(function () {
			$(this).css({
				border: "1px solid red"
			})
		}, function () {
			$(this).css({
				border: "1px solid #e2e2e2"
			})
		})
		return this;
	}
	//二级菜单显示和隐藏
	menu() {
		$("#headermenu").hover(function () {
			$(this).css({
				display: "block"
			})
		}, function () {
			$(this).css({
				display: "none"
			})
		});
		$("#headernav").hover(function () {
			$("#headermenu").css({
				display: "block"
			})
		}, function () {
			$("#headermenu").css({
				display: "none"
			})
		})
		return this;
	}
	//轮播图
	running() {
		this.$timer = window.setInterval(this.autoplay.bind(this), 2000);
		for (let i = 0; i < this.$tab.length; i++) {
			this.$tab.eq(i).mouseenter(function () {
				window.clearInterval(this.$timer);
				this.$index = i - 1;
				this.autoplay();
			}.bind(this))
			this.$tab.eq(i).mouseleave(function () {
				this.$index = i;
				this.$timer = window.setInterval(this.autoplay.bind(this), 2000);
			}.bind(this))
		}
		return this;
	}
	//轮播调用
	autoplay() {
		this.$index++;
		//console.log(this.$index)
		if (this.$index == this.$tab.size()) {
			this.$index = 0;
		}
		this.$imgs.eq(this.$index).fadeIn(1000).siblings().fadeOut();
		this.$tab.eq(this.$index).addClass("active").siblings().removeClass("active");
	}
	//当页面滚动到710的时候，让头部隐藏的显示
	scrolling1() {
		$(window).scroll(function () {
			let $_scrolltop = $("html").scrollTop();
			if ($_scrolltop > 710) {
				$(".header_fix").show();
			} else {
				$(".header_fix").hide();
			}
		})
		return this;
	}
	//当页面滚动到610的时候，改变侧边栏的样式
	scrolling2() {
		$(window).scroll(function () {
			let _scrollT = $("html").scrollTop();
			if (_scrollT > 610) {
				$(".happy_summer").css({
					"position": "fixed",
					"top": 150,
					"right": 110
				})
			} else {
				$(".happy_summer").css({
					"position": "absolute",
					"top": 0,
					"right": 110
				})
			}
		})
		//点击happay_bottom回到顶部
		$(".happy_bottom").click(function () {
			$("html").scrollTop(0);
		})
		return this;
	}
	//鼠标滑过图片效果
	picRun() {
		$(".entrance_lists li img").hover(function () {
			$(this).stop();
			$(this).animate({
				right: 35
			});
		}, function () {
			$(this).stop();
			$(this).animate({
				right: 25
			});
		})
		return this;
	}
	//ajax动态获取活动页图片
	ajaxA() {
		$.ajax({
			type: "get",
			url: "../json/data.json",
			dataType: "json",
			success: function (data1) {
				//var data1 = JSON.parse(data1);
				let $oul = $(".dongtaiget");
				data1.forEach(function (item, index) {
					let $_href = $("<a>");
					$_href.addClass("supergoods_a");
					let $oli = $("<li>");
					$oli.addClass("superli");
					let _hrefhtml = `<div class="single_top">
											<img src="${data1[index].imgurl}" class="single_top_img" alt="">
										</div>
										<div class="single_bottom">
											<div class="s_title">${data1[index].pname}</div>
											<div class="s_bar">
												<div class="s_progress"></div>
											</div>
											<div class="s_price">
												<span class="s_active">${data1[index].price}</span>
												<span class="s_linethrough">${data1[index].pmoney}</span>
											</div>
										</div>`
					$_href.html(_hrefhtml);
					$oli.append($_href);
					$oul.append($oli);
				})
				$(".superli").hover(function () {
					$(this).find("a").css({
						"transform": "scale(1.05,1.05)",
						"background": "#fff",
						"box-shadow": "0 0 15px #ccc",
						"z-index": 888
					})
				}, function () {
					$(this).find("a").css({
						"transform": "scale(1,1)",
						"box-shadow": "0 0",
						"z-index": "auto"
					})
				})

			}
		})
		return this;
	}
	//侧边栏单击按钮效果
	slideBtn() {
		let $leftbtn01 = $(".qua_slide_left01");
		let $leftbtn02 = $(".qua_slide_left02");
		let $leftbtn03 = $(".qua_slide_left03");
		let $righttbtn01 = $(".qua_slide_right01");
		let $righttbtn02 = $(".qua_slide_right02");
		let $righttbtn03 = $(".qua_slide_right03");
		$leftbtn01.click(function () {
			if (this.$flag-- != 0) {
				$(".qua_lists01").animate({
					left: -this.$flag * 210
				});
			} else {
				this.$flag = 0;
			}
		}.bind(this));
		$righttbtn01.click(function () {
			if (this.$flag++ == 2) {
				this.$flag = 0;
				$(".qua_lists01").animate({
					left: -this.$flag * 210
				});
			} else {
				$(".qua_lists01").animate({
					left: -this.$flag * 210
				});
			}
		}.bind(this));
		$leftbtn02.click(function () {
			if (this.$flag-- != 0) {
				$(".qua_lists02").animate({
					left: -this.$flag * 210
				});
			} else {
				this.$flag = 0;
			}
		}.bind(this));
		$righttbtn02.click(function () {
			if (this.$flag++ == 2) {
				this.$flag = 0;
				$(".qua_lists02").animate({
					left: -this.$flag * 210
				});
			} else {
				$(".qua_lists02").animate({
					left: -this.$flag * 210
				});
			}
		}.bind(this));
		$leftbtn03.click(function () {
			if (this.$flag-- != 0) {
				$(".qua_lists03").animate({
					left: -this.$flag * 210
				});
			} else {
				this.$flag = 0;
			}
		}.bind(this));
		$righttbtn03.click(function () {
			if (this.$flag++ == 2) {
				this.$flag = 0;
				$(".qua_lists03").animate({
					left: -this.$flag * 210
				});
			} else {
				$(".qua_lists03").animate({
					left: -this.$flag * 210
				});
			}
		}.bind(this));
		return this;
	}
}
//懂你想要区数据加载
var data_g = null;

function render() {
	$.ajax({
		url: "http://localhost:3000/pxx",
		data: {
			pdduid: 0,
			page: 1,
			size: 30,
			list_id: "promotion_subject21933_8tdjNJ_spike_1_0",
			day_type: 1,
			tab: 0,
			component_mark: "20190822_sub_21933_秒杀商品-赛马专属-周促",
			anti_content: "0anAfanUdilYq9dVyruXwHj_G2ZC_tg1CJXZv86_pXSTHnS-tG_XUX5-FFsiAXjkwXMpvfnzLC2JC1mkVEHlT9Hc9sz1v9OzeRNRGjWNlTz9t9hr9fOPodA8ZUoMYMiU2__QxdR_R3zRtD9SrA_8ig2c-Ydk6jviqUSm6Y64SK0iPXzYyNfYbpy1kLMweV-7nHgEIDCrkITSZG7x3IPZxEOVsiho5-QBZyKrcxy7rkaQ3YuYO3u-HZeLOkRka8iWaBwrbey8aVMLzepm1WD8HWJkAaYZdyKcifp7hFFXlXiqRaklGeOXRloGPtml3-PiW1otCXPaI5IgjkesshEf4eFR12RmY7PKrsP6XSxuZm08gueSS0_di9PJ4Ftiwn4BGdnxI02DBKCridiYG9PKV_ld2tZsH9qFBm1HxYKaeZsKHM4YfT5mjKgFUUJ5kGAsl3Veupk_Bo0Z_lY7Zf9dtBBZjBapDXHYf-BymbgqFQmycIPvTMzr4Oyr-sZBHW1zvF-WXG0TuIS5sSknu7lSlrl8biSzDIC3ZzQsHzaAKLPWiB3yulow-yHk9p8y6go0kKY8oEMksn8h0Gc4AEvE-MWAgO8LOUiSjPLhSqG5jbnwcHCh54I3Ypk1iDTMShxthTtQjW5S2NuJ6WMIONyiReJbW6V7iwNOJJ"
		},
		success: function (res) {
			let list = res.items;
			data_g = list;
			let $oul1 = $(".load_goods");
			var lihtml = "";
			for (let i = 0; i < list.length; i++) {
				lihtml += `<li class="goods_item" data-id="${list[i].data.id}" data-index=${ i }>
								<div class="load_pic">
									<img src="${list[i].data.hd_thumb_url}" alt="">
								</div>
								<p class="load_tit">${list[i].data.goods_name}</p>
								<p class="load_price">￥<span>${(list[i].data.normal_price / 100) .toFixed(2)}</span></p>
								<div class="cover">
									<div class="gw_l">
										<i class="iconfont icon-gouwuchekong"></i>
									</div>
									<div class="gw_r">
										找相似
									</div>
								</div>
							</li>`
			}
			//console.log(ulhtml);
			$oul1.html(lihtml);
		}
	})
}
render();

//点击商品跳转到详情页并记录商品信息到localStorage里
$(".load_goods").on("click", ".goods_item", function () {
	let index = $(this).attr("data-index");
	localStorage.setItem("detail", JSON.stringify(data_g[index]));
	location.assign("../page/goods.html");
})

//鼠标滑过cover效果
$(".load_goods").on("mouseover", ".goods_item", function () {
	$(this).css({
		border: "1px solid red"
	})
	$(this).find(".cover").stop();
	$(this).find(".cover").animate({
		opacity: 0.9
	}, 300);
});
$(".load_goods").on("mouseout", ".goods_item", function () {
	$(this).css({
		border: "none"
	})
	$(this).find(".cover").stop();
	$(this).find(".cover").animate({
		opacity: 0
	}, 300);
});

//倒计时
function daojishi() {
	var godie = new Date("2020-01-03 16:00:00").getTime() / 1000;
	setInterval(function () {
		var now = new Date().getTime() / 1000;
		var total = parseInt(godie - now);
		var hour = parseInt(total / 3600);
		var minute = parseInt((total - hour * 3600) / 60);
		var sec = total % 60;
		if (parseInt(hour) < 10) hour = "0" + hour;
		if (parseInt(minute) < 10) minute = "0" + minute;
		if (parseInt(sec) < 10) sec = "0" + sec;
		if (total <= 0) godie = 7200 + now;
		var spans = document.querySelectorAll(".time span");
		spans[0].innerHTML = hour;
		spans[1].innerHTML = minute;
		spans[2].innerHTML = sec;
	}, 1000)
}
daojishi();